<!DOCTYPE html>
<html lang="zh_hans">
    <!-- title -->




<!-- keywords -->




<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" >
    <meta name="author" content="Apm29">
    <meta name="renderer" content="webkit">
    <meta name="copyright" content="Apm29">
    
    <meta name="keywords" content="hexo,hexo-theme,hexo-blog">
    
    <meta name="description" content="daily post">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>SheetJS -- 前端(浏览器)导出Excel文件 · 生活中的Design</title>
    <style type="text/css">
    @font-face {
        font-family: 'Oswald-Regular';
        src: url("/font/Oswald-Regular.ttf");
    }

    body {
        margin: 0;
    }

    header,
    footer,
    .back-top,
    .sidebar,
    .container,
    .site-intro-meta,
    .toc-wrapper {
        display: none;
    }

    .site-intro {
        position: relative;
        z-index: 3;
        width: 100%;
        /* height: 50vh; */
        overflow: hidden;
    }

    .site-intro-placeholder {
        position: absolute;
        z-index: -2;
        top: 0;
        left: 0;
        width: calc(100% + 300px);
        height: 100%;
        background: repeating-linear-gradient(-45deg, #444 0, #444 80px, #333 80px, #333 160px);
        background-position: center center;
        transform: translate3d(-226px, 0, 0);
        animation: gradient-move 2.5s ease-out 0s infinite;
    }

    @keyframes gradient-move {
        0% {
            transform: translate3d(-226px, 0, 0);
        }
        100% {
            transform: translate3d(0, 0, 0);
        }
    }

</style>

    <link rel="preload" href= "/css/style.css?v=20180824" as="style" onload="this.onload=null;this.rel='stylesheet'" />
    <link rel="stylesheet" href= "/css/mobile.css?v=20180824" media="(max-width: 980px)">
    
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
    
    <!-- /*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
/* This file is meant as a standalone workflow for
- testing support for link[rel=preload]
- enabling async CSS loading in browsers that do not support rel=preload
- applying rel preload css once loaded, whether supported or not.
*/ -->
<script>
(function( w ){
	"use strict";
	// rel=preload support test
	if( !w.loadCSS ){
		w.loadCSS = function(){};
	}
	// define on the loadCSS obj
	var rp = loadCSS.relpreload = {};
	// rel=preload feature support test
	// runs once and returns a function for compat purposes
	rp.support = (function(){
		var ret;
		try {
			ret = w.document.createElement( "link" ).relList.supports( "preload" );
		} catch (e) {
			ret = false;
		}
		return function(){
			return ret;
		};
	})();

	// if preload isn't supported, get an asynchronous load by using a non-matching media attribute
	// then change that media back to its intended value on load
	rp.bindMediaToggle = function( link ){
		// remember existing media attr for ultimate state, or default to 'all'
		var finalMedia = link.media || "all";

		function enableStylesheet(){
			link.media = finalMedia;
		}

		// bind load handlers to enable media
		if( link.addEventListener ){
			link.addEventListener( "load", enableStylesheet );
		} else if( link.attachEvent ){
			link.attachEvent( "onload", enableStylesheet );
		}

		// Set rel and non-applicable media type to start an async request
		// note: timeout allows this to happen async to let rendering continue in IE
		setTimeout(function(){
			link.rel = "stylesheet";
			link.media = "only x";
		});
		// also enable media after 3 seconds,
		// which will catch very old browsers (android 2.x, old firefox) that don't support onload on link
		setTimeout( enableStylesheet, 3000 );
	};

	// loop through link elements in DOM
	rp.poly = function(){
		// double check this to prevent external calls from running
		if( rp.support() ){
			return;
		}
		var links = w.document.getElementsByTagName( "link" );
		for( var i = 0; i < links.length; i++ ){
			var link = links[ i ];
			// qualify links to those with rel=preload and as=style attrs
			if( link.rel === "preload" && link.getAttribute( "as" ) === "style" && !link.getAttribute( "data-loadcss" ) ){
				// prevent rerunning on link
				link.setAttribute( "data-loadcss", true );
				// bind listeners to toggle media back
				rp.bindMediaToggle( link );
			}
		}
	};

	// if unsupported, run the polyfill
	if( !rp.support() ){
		// run once at least
		rp.poly();

		// rerun poly on an interval until onload
		var run = w.setInterval( rp.poly, 500 );
		if( w.addEventListener ){
			w.addEventListener( "load", function(){
				rp.poly();
				w.clearInterval( run );
			} );
		} else if( w.attachEvent ){
			w.attachEvent( "onload", function(){
				rp.poly();
				w.clearInterval( run );
			} );
		}
	}


	// commonjs
	if( typeof exports !== "undefined" ){
		exports.loadCSS = loadCSS;
	}
	else {
		w.loadCSS = loadCSS;
	}
}( typeof global !== "undefined" ? global : this ) );
</script>

    <link rel="icon" href= "/assets/favicon.ico" />
    <link rel="preload" href="https://unpkg.com/webfontloader@1.6.28/webfontloader.js" as="script" />
    <link rel="preload" href="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js" as="script" />
    <link rel="preload" href="/scripts/main.js" as="script" />
    <link rel="preload" as="font" href="/font/Oswald-Regular.ttf" crossorigin>
    <link rel="preload" as="font" href="https://at.alicdn.com/t/font_327081_1dta1rlogw17zaor.woff" crossorigin>
    
    <!-- fancybox -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js" defer></script>
    <!-- 百度统计  -->
    
    <!-- 谷歌统计  -->
    
<meta name="generator" content="Hexo 5.4.2"></head>

    
        <body class="post-body">
    
    
<header class="header">

    <div class="read-progress"></div>
    <div class="header-sidebar-menu">&#xe775;</div>
    <!-- post页的toggle banner  -->
    
    <div class="banner">
            <div class="blog-title">
                <a href="/" >生活中的Design.</a>
            </div>
            <div class="post-title">
                <a href="#" class="post-name">SheetJS -- 前端(浏览器)导出Excel文件</a>
            </div>
    </div>
    
    <a class="home-link" href=/>生活中的Design.</a>
</header>
    <div class="wrapper">
        <div class="site-intro" style="







height:50vh;
">
    
    <!-- 主页  -->
    
    
    <!-- 404页  -->
            
    <div class="site-intro-placeholder"></div>
    <div class="site-intro-img" style="background-image: url(/intro/post-bg.jpg)"></div>
    <div class="site-intro-meta">
        <!-- 标题  -->
        <h1 class="intro-title">
            <!-- 主页  -->
            
            SheetJS -- 前端(浏览器)导出Excel文件
            <!-- 404 -->
            
        </h1>
        <!-- 副标题 -->
        <p class="intro-subtitle">
            <!-- 主页副标题  -->
            
            
            <!-- 404 -->
            
        </p>
        <!-- 文章页meta -->
        
            <div class="post-intros">
                <!-- 文章页标签  -->
                
                    <div class= post-intro-tags >
    
        <a class="post-tag" href="javascript:void(0);" data-tags = "前端">前端</a>
    
        <a class="post-tag" href="javascript:void(0);" data-tags = "SheetJS">SheetJS</a>
    
</div>
                
                
                    <div class="post-intro-read">
                        <span>字数统计: <span class="post-count word-count">2.7k</span>阅读时长: <span class="post-count reading-time">13 min</span></span>
                    </div>
                
                <div class="post-intro-meta">
                    <span class="post-intro-calander iconfont-archer">&#xe676;</span>
                    <span class="post-intro-time">2022/07/05</span>
                    
                    <span id="busuanzi_container_page_pv" class="busuanzi-pv">
                        <span class="iconfont-archer">&#xe602;</span>
                        <span id="busuanzi_value_page_pv"></span>
                    </span>
                    
                    <span class="shareWrapper">
                        <span class="iconfont-archer shareIcon">&#xe71d;</span>
                        <span class="shareText">Share</span>
                        <ul class="shareList">
                            <li class="iconfont-archer share-qr" data-type="qr">&#xe75b;
                                <div class="share-qrcode"></div>
                            </li>
                            <li class="iconfont-archer" data-type="weibo">&#xe619;</li>
                            <li class="iconfont-archer" data-type="qzone">&#xe62e;</li>
                            <li class="iconfont-archer" data-type="twitter">&#xe634;</li>
                            <li class="iconfont-archer" data-type="facebook">&#xe67a;</li>
                        </ul>
                    </span>
                </div>
            </div>
        
    </div>
</div>
        <script>

  // get user agent
  var browser = {
    versions: function () {
      var u = window.navigator.userAgent;
      return {
        userAgent: u,
        trident: u.indexOf('Trident') > -1, //IE内核
        presto: u.indexOf('Presto') > -1, //opera内核
        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
        iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者安卓QQ浏览器
        iPad: u.indexOf('iPad') > -1, //是否为iPad
        webApp: u.indexOf('Safari') == -1, //是否为web应用程序，没有头部与底部
        weixin: u.indexOf('MicroMessenger') == -1, //是否为微信浏览器
        uc: u.indexOf('UCBrowser') > -1 //是否为android下的UC浏览器
      };
    }()
  }
  console.log("userAgent:" + browser.versions.userAgent);

  // callback
  function fontLoaded() {
    console.log('font loaded');
    if (document.getElementsByClassName('site-intro-meta')) {
      document.getElementsByClassName('intro-title')[0].classList.add('intro-fade-in');
      document.getElementsByClassName('intro-subtitle')[0].classList.add('intro-fade-in');
      var postIntros = document.getElementsByClassName('post-intros')[0]
      if (postIntros) {
        postIntros.classList.add('post-fade-in');
      }
    }
  }

  // UC不支持跨域，所以直接显示
  function asyncCb() {
    if (browser.versions.uc) {
      console.log("UCBrowser");
      fontLoaded();
    } else {
      WebFont.load({
        custom: {
          families: ['Oswald-Regular']
        },
        loading: function () {  //所有字体开始加载
          // console.log('loading');
        },
        active: function () {  //所有字体已渲染
          fontLoaded();
        },
        inactive: function () { //字体预加载失败，无效字体或浏览器不支持加载
          console.log('inactive: timeout');
          fontLoaded();
        },
        timeout: 5000 // Set the timeout to two seconds
      });
    }
  }

  function asyncErr() {
    console.warn('script load from CDN failed, will load local script')
  }

  // load webfont-loader async, and add callback function
  function async(u, cb, err) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (cb) { o.addEventListener('load', function (e) { cb(null, e); }, false); }
    if (err) { o.addEventListener('error', function (e) { err(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }

  var asyncLoadWithFallBack = function (arr, success, reject) {
    var currReject = function () {
      reject()
      arr.shift()
      if (arr.length)
        async(arr[0], success, currReject)
    }

    async(arr[0], success, currReject)
  }

  asyncLoadWithFallBack([
    "https://unpkg.com/webfontloader@1.6.28/webfontloader.js",
    "https://cdn.bootcss.com/webfont/1.6.28/webfontloader.js",
    "/lib/webfontloader.min.js"
  ], asyncCb, asyncErr)
</script>
        
        <img class="loading" src="/assets/loading.svg" style="display: block; margin: 6rem auto 0 auto; width: 6rem; height: 6rem;" />
        <div class="container container-unloaded">
            <main class="main post-page">
    <article class="article-entry">
        <h1 id="SheetJS-–-前端-浏览器-导出Excel文件"><a href="#SheetJS-–-前端-浏览器-导出Excel文件" class="headerlink" title="SheetJS – 前端(浏览器)导出Excel文件"></a>SheetJS – 前端(浏览器)导出Excel文件</h1><p>项目中有需求导出业务报表为Excel文件,并且需要有一定的样式和格式要求,后端导出的Excel样式设置比较困难于是只好让前端整了┓( ´∀` )┏</p>
<h2 id="需求调研"><a href="#需求调研" class="headerlink" title="需求调研"></a>需求调研</h2><p>前端导出Excel的库基本上大家用的都是SheetJS,我也不找其他了,直接整个SheetJS社区版开干了(<a target="_blank" rel="noopener" href="https://docs.sheetjs.com/docs">SheetJS CE</a>)</p>
<h2 id="SheetJS的功能"><a href="#SheetJS的功能" class="headerlink" title="SheetJS的功能"></a>SheetJS的功能</h2><p>SheetJS可以实现数据导入/导出/处理,文档上有一些实际的示例,比如将文档流中的<code>table</code>标签导出为Excel文件, 读取Excel文件生成<code>table</code>标签,将CSV文件转换为HTML表格或者Excel文件. 社区版(CE)的功能相较专业版(Pro)主要是阉割了CSS样式和富文本。</p>
<h2 id="引入-安装方式"><a href="#引入-安装方式" class="headerlink" title="引入/安装方式"></a>引入/安装方式</h2><p>可以使用Script标签引入:</p>
<blockquote>
<p><code>&lt;script lang=&quot;javascript&quot; src=&quot;https://cdn.sheetjs.com/xlsx-0.18.9/package/dist/xlsx.full.min.js&quot;&gt;&lt;/script&gt;</code></p>
</blockquote>
<p>也可以使用<a target="_blank" rel="noopener" href="https://docs.sheetjs.com/docs/installation/standalone#web-workers">Web Worker</a>,这个没怎么研究,感兴趣可以看下</p>
<p>也可以使用ESM导入方式:</p>
<blockquote>
<p><code>&lt;script type=&quot;module&quot;&gt;
import &#123; read, writeFileXLSX &#125; from &quot;https://cdn.sheetjs.com/xlsx-0.18.9/package/xlsx.mjs&quot;;
&lt;/script&gt;</code></p>
</blockquote>
<p>如果需要XLS支持,需要手动导入<code>cpexcel.full.mjs</code>,这部分主要是为了导出旧版的EXCEL格式(.xls,较新的文件格式是.xlsx)</p>
<blockquote>
<p><code>&lt;script type=&quot;module&quot;&gt;
/* load the codepage support library for extended support with older formats  */
import &#123; set_cptable &#125; from &quot;https://cdn.sheetjs.com/xlsx-0.18.9/package/xlsx.mjs&quot;;
import * as cptable from &#39;https://cdn.sheetjs.com/xlsx-0.18.9/package/dist/cpexcel.full.mjs&#39;;
set_cptable(cptable);
&lt;/script&gt;</code></p>
</blockquote>
<p>当然npm库也是有的,因为我们需要额外的样式定制,所以还引入了<code>xlsx-style</code>:</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">&quot;xlsx&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^0.17.5&quot;</span><span class="punctuation">,</span></span><br><span class="line"><span class="attr">&quot;xlsx-style&quot;</span><span class="punctuation">:</span> <span class="string">&quot;^0.8.13&quot;</span></span><br></pre></td></tr></table></figure>

<p>使用npm库后,上面兼容XLS部分的标签换成npm库ESM导入的方式如下:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* load the codepage support library for extended support with older formats  */</span></span><br><span class="line"><span class="keyword">import</span> &#123; set_cptable &#125; <span class="keyword">from</span> <span class="string">&quot;xlsx&quot;</span>;</span><br><span class="line"><span class="keyword">import</span> * <span class="keyword">as</span> cptable <span class="keyword">from</span> <span class="string">&#x27;xlsx/dist/cpexcel.full.mjs&#x27;</span>;</span><br><span class="line"><span class="title function_">set_cptable</span>(cptable);</span><br></pre></td></tr></table></figure>

<h2 id="基础概念"><a href="#基础概念" class="headerlink" title="基础概念"></a>基础概念</h2><p>SheetJS工作的数据基础格式是二维数组(Array of Array) 或者对象数组 (Array of Object).</p>
<ul>
<li>Array of Array:<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">[</span><br><span class="line">  [<span class="string">&quot;Jamie&quot;</span>,<span class="string">&quot;1990-10-11&quot;</span>,<span class="string">&quot;Engineer&quot;</span>],</span><br><span class="line">  [<span class="string">&quot;Tracy&quot;</span>,<span class="string">&quot;1991-10-11&quot;</span>,<span class="string">&quot;Designer&quot;</span>],</span><br><span class="line">]</span><br></pre></td></tr></table></figure></li>
<li>Array of Object:<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">[</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&quot;George Washington&quot;</span>, <span class="attr">birthday</span>: <span class="string">&quot;1732-02-22&quot;</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">&quot;John Adams&quot;</span>, <span class="attr">birthday</span>: <span class="string">&quot;1735-10-19&quot;</span> &#125;,</span><br><span class="line">]</span><br></pre></td></tr></table></figure>

</li>
</ul>
<h2 id="导出示例"><a href="#导出示例" class="headerlink" title="导出示例"></a>导出示例</h2><blockquote>
<p>JSON/javascript Array -&gt;  Excel</p>
</blockquote>
<p>首先我们需要创建一个Workbook,也就是Excel中的工作簿,在SheetJS中创建工作簿很简单:<br><code>XLSX.utils.book_new</code>,如名字所示,可以创建新的工作薄</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> workbook = <span class="variable constant_">XLSX</span>.<span class="property">utils</span>.<span class="title function_">book_new</span>();</span><br></pre></td></tr></table></figure>
<p><code>XLSX.utils.json_to_sheet</code>,如名字所示,可以将json转换为工作表,我们先新建一个worksheet,也就是Excel中的工作表:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> worksheet = <span class="variable constant_">XLSX</span>.<span class="property">utils</span>.<span class="title function_">json_to_sheet</span>(rows);</span><br></pre></td></tr></table></figure>
<p>再将工作簿放进工作表,并且将工作簿命名为<code>Empoyees</code>:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable constant_">XLSX</span>.<span class="property">utils</span>.<span class="title function_">book_append_sheet</span>(workbook, worksheet, <span class="string">&quot;Empoyees&quot;</span>);</span><br></pre></td></tr></table></figure>

<p>导出Excel文件,并将导出Excel命名为<code>Empoyees.xlsx</code>:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable constant_">XLSX</span>.<span class="title function_">writeFile</span>(workbook, <span class="string">&quot;Empoyees.xlsx&quot;</span>);</span><br></pre></td></tr></table></figure>
<p>在浏览器环境下会直接提示用户下载该Excel.</p>
<h2 id="工具函数"><a href="#工具函数" class="headerlink" title="工具函数"></a>工具函数</h2><p>SheetJS的工具函数放在导出<code>XLSX.utils</code>下,包括新建工作表,工作表添加工作簿等:</p>
<p>拷贝了一份utils的导出类型声明:</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** General utilities */</span></span><br><span class="line"><span class="keyword">export</span> interface <span class="variable constant_">XLSX</span>$Utils &#123;</span><br><span class="line">    <span class="comment">/* --- Import Functions --- */</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Converts an array of arrays of JS data to a worksheet. */</span></span><br><span class="line">    aoa_to_sheet&lt;T&gt;(<span class="attr">data</span>: T[][], opts?: <span class="title class_">AOA2SheetOpts</span>): <span class="title class_">WorkSheet</span>;</span><br><span class="line">    <span class="title function_">aoa_to_sheet</span>(<span class="attr">data</span>: any[][], opts?: <span class="title class_">AOA2SheetOpts</span>): <span class="title class_">WorkSheet</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Converts an array of JS objects to a worksheet. */</span></span><br><span class="line">    json_to_sheet&lt;T&gt;(<span class="attr">data</span>: T[], opts?: <span class="title class_">JSON</span>2SheetOpts): <span class="title class_">WorkSheet</span>;</span><br><span class="line">    <span class="title function_">json_to_sheet</span>(<span class="attr">data</span>: any[], opts?: <span class="title class_">JSON</span>2SheetOpts): <span class="title class_">WorkSheet</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** BROWSER ONLY! Converts a TABLE DOM element to a worksheet. */</span></span><br><span class="line">    <span class="title function_">table_to_sheet</span>(<span class="attr">data</span>: any,  opts?: <span class="title class_">Table2SheetOpts</span>): <span class="title class_">WorkSheet</span>;</span><br><span class="line">    <span class="title function_">table_to_book</span>(<span class="attr">data</span>: any,  opts?: <span class="title class_">Table2SheetOpts</span>): <span class="title class_">WorkBook</span>;</span><br><span class="line">    <span class="title function_">sheet_add_dom</span>(<span class="attr">ws</span>: <span class="title class_">WorkSheet</span>, <span class="attr">data</span>: any, opts?: <span class="title class_">Table2SheetOpts</span>): <span class="title class_">WorkSheet</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/* --- Export Functions --- */</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Converts a worksheet object to an array of JSON objects */</span></span><br><span class="line">    sheet_to_json&lt;T&gt;(<span class="attr">worksheet</span>: <span class="title class_">WorkSheet</span>, opts?: <span class="title class_">Sheet2JSONOpts</span>): T[];</span><br><span class="line">    <span class="title function_">sheet_to_json</span>(<span class="attr">worksheet</span>: <span class="title class_">WorkSheet</span>, opts?: <span class="title class_">Sheet2JSONOpts</span>): any[][];</span><br><span class="line">    <span class="title function_">sheet_to_json</span>(<span class="attr">worksheet</span>: <span class="title class_">WorkSheet</span>, opts?: <span class="title class_">Sheet2JSONOpts</span>): any[];</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Generates delimiter-separated-values output */</span></span><br><span class="line">    <span class="title function_">sheet_to_csv</span>(<span class="attr">worksheet</span>: <span class="title class_">WorkSheet</span>, options?: <span class="title class_">Sheet2CSVOpts</span>): string;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Generates UTF16 Formatted Text */</span></span><br><span class="line">    <span class="title function_">sheet_to_txt</span>(<span class="attr">worksheet</span>: <span class="title class_">WorkSheet</span>, options?: <span class="title class_">Sheet2CSVOpts</span>): string;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Generates HTML */</span></span><br><span class="line">    <span class="title function_">sheet_to_html</span>(<span class="attr">worksheet</span>: <span class="title class_">WorkSheet</span>, options?: <span class="title class_">Sheet2HTMLOpts</span>): string;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Generates a list of the formulae (with value fallbacks) */</span></span><br><span class="line">    <span class="title function_">sheet_to_formulae</span>(<span class="attr">worksheet</span>: <span class="title class_">WorkSheet</span>): string[];</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Generates DIF */</span></span><br><span class="line">    <span class="title function_">sheet_to_dif</span>(<span class="attr">worksheet</span>: <span class="title class_">WorkSheet</span>, options?: <span class="title class_">Sheet2HTMLOpts</span>): string;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Generates SYLK (Symbolic Link) */</span></span><br><span class="line">    <span class="title function_">sheet_to_slk</span>(<span class="attr">worksheet</span>: <span class="title class_">WorkSheet</span>, options?: <span class="title class_">Sheet2HTMLOpts</span>): string;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Generates ETH */</span></span><br><span class="line">    <span class="title function_">sheet_to_eth</span>(<span class="attr">worksheet</span>: <span class="title class_">WorkSheet</span>, options?: <span class="title class_">Sheet2HTMLOpts</span>): string;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/* --- Cell Address Utilities --- */</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Converts 0-indexed cell address to A1 form */</span></span><br><span class="line">    <span class="title function_">encode_cell</span>(<span class="attr">cell</span>: <span class="title class_">CellAddress</span>): string;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Converts 0-indexed row to A1 form */</span></span><br><span class="line">    <span class="title function_">encode_row</span>(<span class="attr">row</span>: number): string;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Converts 0-indexed column to A1 form */</span></span><br><span class="line">    <span class="title function_">encode_col</span>(<span class="attr">col</span>: number): string;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Converts 0-indexed range to A1 form */</span></span><br><span class="line">    <span class="title function_">encode_range</span>(<span class="attr">s</span>: <span class="title class_">CellAddress</span>, <span class="attr">e</span>: <span class="title class_">CellAddress</span>): string;</span><br><span class="line">    <span class="title function_">encode_range</span>(<span class="attr">r</span>: <span class="title class_">Range</span>): string;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Converts A1 cell address to 0-indexed form */</span></span><br><span class="line">    <span class="title function_">decode_cell</span>(<span class="attr">address</span>: string): <span class="title class_">CellAddress</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Converts A1 row to 0-indexed form */</span></span><br><span class="line">    <span class="title function_">decode_row</span>(<span class="attr">row</span>: string): number;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Converts A1 column to 0-indexed form */</span></span><br><span class="line">    <span class="title function_">decode_col</span>(<span class="attr">col</span>: string): number;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Converts A1 range to 0-indexed form */</span></span><br><span class="line">    <span class="title function_">decode_range</span>(<span class="attr">range</span>: string): <span class="title class_">Range</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Format cell */</span></span><br><span class="line">    <span class="title function_">format_cell</span>(<span class="attr">cell</span>: <span class="title class_">CellObject</span>, v?: any, opts?: any): string;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/* --- General Utilities --- */</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Creates a new workbook */</span></span><br><span class="line">    <span class="title function_">book_new</span>(): <span class="title class_">WorkBook</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Append a worksheet to a workbook */</span></span><br><span class="line">    <span class="title function_">book_append_sheet</span>(<span class="attr">workbook</span>: <span class="title class_">WorkBook</span>, <span class="attr">worksheet</span>: <span class="title class_">WorkSheet</span>, name?: string): <span class="keyword">void</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Set sheet visibility (visible/hidden/very hidden) */</span></span><br><span class="line">    <span class="title function_">book_set_sheet_visibility</span>(<span class="attr">workbook</span>: <span class="title class_">WorkBook</span>, <span class="attr">sheet</span>: number|string, <span class="attr">visibility</span>: number): <span class="keyword">void</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Set number format for a cell */</span></span><br><span class="line">    <span class="title function_">cell_set_number_format</span>(<span class="attr">cell</span>: <span class="title class_">CellObject</span>, <span class="attr">fmt</span>: string|number): <span class="title class_">CellObject</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Set hyperlink for a cell */</span></span><br><span class="line">    <span class="title function_">cell_set_hyperlink</span>(<span class="attr">cell</span>: <span class="title class_">CellObject</span>, <span class="attr">target</span>: string, tooltip?: string): <span class="title class_">CellObject</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Set internal link for a cell */</span></span><br><span class="line">    <span class="title function_">cell_set_internal_link</span>(<span class="attr">cell</span>: <span class="title class_">CellObject</span>, <span class="attr">target</span>: string, tooltip?: string): <span class="title class_">CellObject</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Add comment to a cell */</span></span><br><span class="line">    <span class="title function_">cell_add_comment</span>(<span class="attr">cell</span>: <span class="title class_">CellObject</span>, <span class="attr">text</span>: string, author?: string): <span class="keyword">void</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Assign an Array Formula to a range */</span></span><br><span class="line">    <span class="title function_">sheet_set_array_formula</span>(<span class="attr">ws</span>: <span class="title class_">WorkSheet</span>, <span class="attr">range</span>: <span class="title class_">Range</span>|string, <span class="attr">formula</span>: string): <span class="title class_">WorkSheet</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Add an array of arrays of JS data to a worksheet */</span></span><br><span class="line">    sheet_add_aoa&lt;T&gt;(<span class="attr">ws</span>: <span class="title class_">WorkSheet</span>, <span class="attr">data</span>: T[][], opts?: <span class="title class_">SheetAOAOpts</span>): <span class="title class_">WorkSheet</span>;</span><br><span class="line">    <span class="title function_">sheet_add_aoa</span>(<span class="attr">ws</span>: <span class="title class_">WorkSheet</span>, <span class="attr">data</span>: any[][], opts?: <span class="title class_">SheetAOAOpts</span>): <span class="title class_">WorkSheet</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Add an array of JS objects to a worksheet */</span></span><br><span class="line">    <span class="title function_">sheet_add_json</span>(<span class="attr">ws</span>: <span class="title class_">WorkSheet</span>, <span class="attr">data</span>: any[], opts?: <span class="title class_">SheetJSONOpts</span>): <span class="title class_">WorkSheet</span>;</span><br><span class="line">    sheet_add_json&lt;T&gt;(<span class="attr">ws</span>: <span class="title class_">WorkSheet</span>, <span class="attr">data</span>: T[], opts?: <span class="title class_">SheetJSONOpts</span>): <span class="title class_">WorkSheet</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">    <span class="attr">consts</span>: <span class="variable constant_">XLSX</span>$Consts;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>我们应该会用到的几个API:</p>
<ol>
<li><code>book_new</code>: 新建工作表,无参数返回<code>WorkBook</code>对象</li>
</ol>
<table>
<thead>
<tr>
<th>参数名称</th>
<th>解释</th>
<th>类型</th>
</tr>
</thead>
<tbody><tr>
<td>无参数</td>
<td></td>
<td></td>
</tr>
<tr>
<td>返回值</td>
<td>工作表对象</td>
<td><code>WorkBook</code></td>
</tr>
</tbody></table>
<ol start="2">
<li><code>book_append_sheet</code>: 向工作表追加工作簿</li>
</ol>
<table>
<thead>
<tr>
<th>参数名称</th>
<th>解释</th>
<th>类型</th>
</tr>
</thead>
<tbody><tr>
<td>workbook</td>
<td>工作表</td>
<td><code>WorkBook</code></td>
</tr>
<tr>
<td>worksheet</td>
<td>工作簿</td>
<td><code>WorkSheet</code></td>
</tr>
<tr>
<td>name</td>
<td>工作簿名称</td>
<td><code>String</code></td>
</tr>
<tr>
<td>返回值</td>
<td>无</td>
<td><code>void</code></td>
</tr>
</tbody></table>
<ol start="3">
<li><code>table_to_sheet</code>: HTML文档流table转换为Sheet</li>
</ol>
<table>
<thead>
<tr>
<th>参数名称</th>
<th>解释</th>
<th>类型</th>
</tr>
</thead>
<tbody><tr>
<td>data</td>
<td>DOM</td>
<td><code>any</code></td>
</tr>
<tr>
<td>opts?</td>
<td>配置选项</td>
<td><code>Table2SheetOpts</code></td>
</tr>
<tr>
<td>返回值</td>
<td>工作簿</td>
<td><code>WorkSheet</code></td>
</tr>
</tbody></table>
<h2 id="xlsx-style"><a href="#xlsx-style" class="headerlink" title="xlsx-style"></a>xlsx-style</h2><p><code>xlsx-style</code>其实是从SheetJS项目中fork出来的,能够提供单元格格式的定制功能,基本API和xlsx差不多.<br>支持的读取格式:</p>
<ul>
<li>Excel 2007+ XML Formats (XLSX/XLSM)</li>
<li>Excel 2007+ Binary Format (XLSB)</li>
<li>Excel 2003-2004 XML Format (XML “SpreadsheetML”)</li>
<li>Excel 97-2004 (XLS BIFF8)</li>
<li>Excel 5.0/95 (XLS BIFF5)</li>
<li>OpenDocument Spreadsheet (ODS)</li>
</ul>
<p>支持的写入格式</p>
<ul>
<li>XLSX</li>
<li>CSV (and general DSV)</li>
<li>JSON and JS objects (various styles)</li>
</ul>
<p>xlsx-style工作的基础就是WorkSheet对象上单元格对应的对象<code>CellObject</code>,可以看到CellObject含有一个s字段,代表单元格的style,但是仅仅支持少量的属性,例如border,font,fgColor等:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** Worksheet Object */</span></span><br><span class="line"><span class="keyword">export</span> interface <span class="title class_">WorkSheet</span> <span class="keyword">extends</span> <span class="title class_">Sheet</span> &#123;</span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * Indexing with a cell address string maps to a cell object</span></span><br><span class="line"><span class="comment">     * Special keys start with &#x27;!&#x27;</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    [<span class="attr">cell</span>: string]: <span class="title class_">CellObject</span> | <span class="title class_">WSKeys</span> | any;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Column Info */</span></span><br><span class="line">    <span class="string">&#x27;!cols&#x27;</span>?: <span class="title class_">ColInfo</span>[];</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Row Info */</span></span><br><span class="line">    <span class="string">&#x27;!rows&#x27;</span>?: <span class="title class_">RowInfo</span>[];</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Merge Ranges */</span></span><br><span class="line">    <span class="string">&#x27;!merges&#x27;</span>?: <span class="title class_">Range</span>[];</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Worksheet Protection info */</span></span><br><span class="line">    <span class="string">&#x27;!protect&#x27;</span>?: <span class="title class_">ProtectInfo</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** AutoFilter info */</span></span><br><span class="line">    <span class="string">&#x27;!autofilter&#x27;</span>?: <span class="title class_">AutoFilterInfo</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/** Worksheet Cell Object */</span></span><br><span class="line"><span class="keyword">export</span> interface <span class="title class_">CellObject</span> &#123;</span><br><span class="line">    <span class="comment">/** The raw value of the cell.  Can be omitted if a formula is specified */</span></span><br><span class="line">    v?: string | number | boolean | <span class="title class_">Date</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Formatted text (if applicable) */</span></span><br><span class="line">    w?: string;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * The Excel Data Type of the cell.</span></span><br><span class="line"><span class="comment">     * b Boolean, n Number, e Error, s String, d Date, z Empty</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    <span class="attr">t</span>: <span class="title class_">ExcelDataType</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Cell formula (if applicable) */</span></span><br><span class="line">    f?: string;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Range of enclosing array if formula is array formula (if applicable) */</span></span><br><span class="line">    F?: string;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Rich text encoding (if applicable) */</span></span><br><span class="line">    r?: any;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** HTML rendering of the rich text (if applicable) */</span></span><br><span class="line">    h?: string;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Comments associated with the cell */</span></span><br><span class="line">    c?: <span class="title class_">Comments</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Number format string associated with the cell (if requested) */</span></span><br><span class="line">    z?: <span class="title class_">NumberFormat</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** Cell hyperlink object (.Target holds link, .tooltip is tooltip) */</span></span><br><span class="line">    l?: <span class="title class_">Hyperlink</span>;</span><br><span class="line"></span><br><span class="line">    <span class="comment">/** The style/theme of the cell (if applicable) */</span></span><br><span class="line">    s?: any;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>我们的基本思路就是先用xlsx同table表格生成一个<code>WorkBook</code>对象,然后对<code>WorkBook</code>的每个<code>CellObject</code>设置显示样式,再使用xlsx-style的<code>write</code>API将WorkBook对象写入为二进制流(binary),再将该流转换为Blob,通过<code>file-saver</code>导出Excel文件.</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//生成工作簿</span></span><br><span class="line"><span class="keyword">const</span> workSheet = <span class="variable constant_">XLSX</span>.<span class="property">utils</span>.<span class="title function_">table_to_sheet</span>(dom, &#123; <span class="attr">raw</span>: <span class="literal">true</span> &#125;);</span><br><span class="line"><span class="comment">//每个单元格加边框,列序数从0开始,行序数从1开始</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> columnIndex = <span class="number">0</span>; columnIndex &lt; <span class="title function_">getTotalColumns</span>(headers); columnIndex++) &#123;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> rowIndex = <span class="number">1</span>; rowIndex &lt;= items.<span class="property">length</span> + headerRows; rowIndex++) &#123;</span><br><span class="line">    <span class="keyword">const</span> key = <span class="string">`<span class="subst">$&#123;getColumnKeyFromIndex(columnIndex)&#125;</span><span class="subst">$&#123;rowIndex&#125;</span>`</span>;</span><br><span class="line">    <span class="comment">// console.log(columnIndex, rowIndex, key);</span></span><br><span class="line">    <span class="keyword">if</span> (!workSheet[key]) &#123;</span><br><span class="line">      workSheet[key] = &#123;</span><br><span class="line">        <span class="attr">t</span>: <span class="string">&quot;z&quot;</span>, <span class="comment">// b Boolean, n Number, e error, s String, d Date, z Stub</span></span><br><span class="line">        <span class="attr">v</span>: <span class="string">&quot;&quot;</span>,  <span class="comment">// cell原始值 string | number | boolean | Date</span></span><br><span class="line">        <span class="attr">s</span>: &#123;</span><br><span class="line">          <span class="comment">//边框</span></span><br><span class="line">          <span class="attr">border</span>: &#123;</span><br><span class="line">            <span class="attr">top</span>: &#123; <span class="attr">style</span>: <span class="string">&quot;thin&quot;</span>, <span class="attr">color</span>: &#123; <span class="attr">auto</span>: <span class="number">1</span> &#125; &#125;,</span><br><span class="line">            <span class="attr">left</span>: &#123; <span class="attr">style</span>: <span class="string">&quot;thin&quot;</span>, <span class="attr">color</span>: &#123; <span class="attr">auto</span>: <span class="number">1</span> &#125; &#125;,</span><br><span class="line">            <span class="attr">bottom</span>: &#123; <span class="attr">style</span>: <span class="string">&quot;thin&quot;</span>, <span class="attr">color</span>: &#123; <span class="attr">auto</span>: <span class="number">1</span> &#125; &#125;,</span><br><span class="line">            <span class="attr">right</span>: &#123; <span class="attr">style</span>: <span class="string">&quot;thin&quot;</span>, <span class="attr">color</span>: &#123; <span class="attr">auto</span>: <span class="number">1</span> &#125; &#125;,</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//其他样式,略</span></span><br><span class="line"><span class="comment">//通用样式</span></span><br><span class="line"><span class="title class_">Object</span>.<span class="title function_">keys</span>(workSheet).<span class="title function_">forEach</span>(<span class="function">(<span class="params">key</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (!key.<span class="title function_">startsWith</span>(<span class="string">&quot;!&quot;</span>)) &#123;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      <span class="keyword">const</span> [column, row] = <span class="title function_">getExcelColumnRowFromKey</span>(key);</span><br><span class="line"></span><br><span class="line">      <span class="keyword">const</span> rowIndex = row - headerRows - <span class="number">1</span>;</span><br><span class="line">      <span class="keyword">const</span> columnIndex = column - <span class="number">1</span>;</span><br><span class="line">      <span class="keyword">const</span> rowItem = rowIndex &gt;= <span class="number">0</span> ? props.<span class="property">items</span>[rowIndex] : &#123;&#125;;</span><br><span class="line">      <span class="comment">//excel的列号是从1开始的,需要减一</span></span><br><span class="line">      <span class="keyword">const</span> columnItem = columnIndex &gt;= <span class="number">0</span> ? <span class="title function_">getTreeLeafs</span>(headers)[columnIndex] : &#123;&#125;;</span><br><span class="line">      <span class="keyword">const</span> styleObject = <span class="title function_">getCellStyle</span>(&#123;</span><br><span class="line">        <span class="attr">row</span>: rowItem,</span><br><span class="line">        <span class="attr">column</span>: columnItem,</span><br><span class="line">        <span class="attr">rowIndex</span>: rowIndex,</span><br><span class="line">        <span class="attr">columnIndex</span>: columnIndex,</span><br><span class="line">      &#125;);</span><br><span class="line">      <span class="keyword">const</span> bgColorHex = <span class="title function_">colorToHex</span>(styleObject.<span class="property">backgroundColor</span>).<span class="title function_">replace</span>(<span class="string">&quot;#&quot;</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">      <span class="keyword">const</span> colorHex = <span class="string">&quot;&quot;</span>;</span><br><span class="line">      workSheet[key].<span class="property">s</span> = &#123;</span><br><span class="line">        <span class="attr">font</span>: &#123;</span><br><span class="line">          <span class="attr">sz</span>: <span class="number">7</span>, <span class="comment">//7号字体</span></span><br><span class="line">          <span class="attr">bold</span>: row === headerRows, <span class="comment">//第三行加粗</span></span><br><span class="line">          <span class="attr">color</span>: &#123;</span><br><span class="line">            <span class="attr">rgb</span>: colorHex ?? <span class="string">&quot;FF333333&quot;</span>, <span class="comment">//字体颜色</span></span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">fill</span>: &#123;</span><br><span class="line">          <span class="attr">fgColor</span>: &#123;</span><br><span class="line">            <span class="attr">rgb</span>: bgColorHex,</span><br><span class="line">          &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="attr">alignment</span>: &#123;</span><br><span class="line">          <span class="attr">horizontal</span>: <span class="string">&quot;center&quot;</span>, <span class="comment">//水平居中对其</span></span><br><span class="line">          <span class="attr">vertical</span>: <span class="string">&quot;center&quot;</span>, <span class="comment">//垂直居中对其</span></span><br><span class="line">        &#125;,</span><br><span class="line">        <span class="comment">//border 对合并的单元格不起作用</span></span><br><span class="line">        <span class="attr">border</span>: &#123;</span><br><span class="line">          <span class="attr">right</span>: &#123; <span class="attr">style</span>: <span class="string">&quot;thin&quot;</span>, <span class="attr">color</span>: &#123; <span class="attr">auto</span>: <span class="number">1</span> &#125; &#125;,</span><br><span class="line">          <span class="attr">bottom</span>: &#123; <span class="attr">style</span>: <span class="string">&quot;thin&quot;</span>, <span class="attr">color</span>: &#123; <span class="attr">auto</span>: <span class="number">1</span> &#125; &#125;,</span><br><span class="line">          <span class="attr">left</span>: &#123; <span class="attr">style</span>: <span class="string">&quot;thin&quot;</span>, <span class="attr">color</span>: &#123; <span class="attr">auto</span>: <span class="number">1</span> &#125; &#125;,</span><br><span class="line">          <span class="attr">top</span>: &#123; <span class="attr">style</span>: <span class="string">&quot;thin&quot;</span>, <span class="attr">color</span>: &#123; <span class="attr">auto</span>: <span class="number">1</span> &#125; &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line">      &#125;;</span><br><span class="line">    &#125; <span class="keyword">catch</span> (error) &#123;</span><br><span class="line">      <span class="variable language_">console</span>.<span class="title function_">log</span>(error);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//设置列宽</span></span><br><span class="line">workSheet[<span class="string">&quot;!cols&quot;</span>] = filteredHeaders</span><br><span class="line">  .<span class="title function_">flatMap</span>(<span class="function">(<span class="params">it</span>) =&gt;</span> (it.<span class="property">children</span> ? [it, ...it.<span class="property">children</span>] : [it]))</span><br><span class="line">  .<span class="title function_">map</span>(<span class="function">(<span class="params">head</span>) =&gt;</span> (&#123;</span><br><span class="line">    <span class="attr">wpx</span>: head.<span class="property">minWidth</span>,</span><br><span class="line">&#125;));</span><br><span class="line"><span class="comment">//...</span></span><br><span class="line"><span class="comment">//工作表</span></span><br><span class="line"><span class="keyword">const</span> workBook = <span class="variable constant_">XLSX</span>.<span class="property">utils</span>.<span class="title function_">book_new</span>();</span><br><span class="line"><span class="variable constant_">XLSX</span>.<span class="property">utils</span>.<span class="title function_">book_append_sheet</span>(workBook, workSheet, sheetName);</span><br><span class="line"></span><br><span class="line"><span class="comment">//生成二进制对象</span></span><br><span class="line"><span class="keyword">const</span> <span class="title class_">WithStyle</span> = <span class="title class_">XlsxStyle</span>.<span class="title function_">write</span>(workBook, &#123;</span><br><span class="line">  <span class="attr">bookType</span>: <span class="string">&quot;xlsx&quot;</span>,</span><br><span class="line">  <span class="attr">bookSST</span>: <span class="literal">false</span>,</span><br><span class="line">  <span class="attr">type</span>: <span class="string">&quot;binary&quot;</span>,</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//导出 file-saver.js 的 saveAs</span></span><br><span class="line"><span class="title function_">saveAs</span>(</span><br><span class="line">  <span class="keyword">new</span> <span class="title class_">Blob</span>([<span class="title function_">sheetAsArrayBuffer</span>(<span class="title class_">WithStyle</span>)], &#123;</span><br><span class="line">    <span class="attr">type</span>: <span class="string">&quot;application/octet-stream&quot;</span>,</span><br><span class="line">  &#125;),</span><br><span class="line">  <span class="string">`<span class="subst">$&#123;fileName&#125;</span>.xlsx`</span></span><br><span class="line">);</span><br></pre></td></tr></table></figure>

<p>用到的二进制转ArrayBuffer方法:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">function</span> <span class="title function_">sheetAsArrayBuffer</span>(<span class="params">s</span>) &#123;</span><br><span class="line">  <span class="keyword">const</span> buf = <span class="keyword">new</span> <span class="title class_">ArrayBuffer</span>(s.<span class="property">length</span>);</span><br><span class="line">  <span class="keyword">const</span> view = <span class="keyword">new</span> <span class="title class_">Uint8Array</span>(buf);</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i != s.<span class="property">length</span>; ++i) &#123;</span><br><span class="line">    view[i] = s.<span class="title function_">charCodeAt</span>(i) &amp; <span class="number">0xff</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> buf;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>列序数转Excel列名(A,B, … AA, AB这种格式):</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//根据index获取excel列索引 例如 0-&gt;A, 1-&gt;B, 26-&gt;AA, 27-&gt;AB</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">getColumnKeyFromIndex</span>(<span class="params">index</span>) &#123;</span><br><span class="line">  <span class="comment">//根据index获取excel列索引</span></span><br><span class="line">  <span class="keyword">let</span> quotient = index + <span class="number">1</span>;</span><br><span class="line">  <span class="keyword">let</span> reminder = <span class="number">0</span>;</span><br><span class="line">  <span class="keyword">let</span> column = <span class="string">&quot;&quot;</span></span><br><span class="line"></span><br><span class="line">  <span class="keyword">do</span> &#123;</span><br><span class="line">    reminder = quotient % <span class="number">26</span>;</span><br><span class="line">    <span class="comment">//console.log(`reminder = $&#123;reminder&#125;`)</span></span><br><span class="line">    quotient = <span class="title class_">Math</span>.<span class="title function_">floor</span>(quotient / <span class="number">26</span>);</span><br><span class="line">    <span class="comment">//console.log(`quotient = $&#123;quotient&#125;`)</span></span><br><span class="line">    <span class="keyword">if</span> (reminder === <span class="number">0</span>) &#123;</span><br><span class="line">      reminder = <span class="number">26</span></span><br><span class="line">      quotient -= <span class="number">1</span></span><br><span class="line">    &#125;</span><br><span class="line">    column = <span class="title function_">numberToAlphabet</span>(reminder) + column;</span><br><span class="line">  &#125; <span class="keyword">while</span> (quotient !== <span class="number">0</span>)</span><br><span class="line"></span><br><span class="line">  <span class="keyword">return</span> column;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>从Excel单元格名称获取行列数:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * 从A1格式的字符串获取行列数[1,1](从1开始的)</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@param</span> &#123;<span class="type">String</span>&#125; key </span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">export</span> <span class="keyword">function</span> <span class="title function_">getExcelColumnRowFromKey</span>(<span class="params">key</span>) &#123;</span><br><span class="line">  <span class="comment">//从Excel单元格分成列和行</span></span><br><span class="line">  <span class="keyword">const</span> column = key.<span class="title function_">replace</span>(<span class="regexp">/[0-9]/g</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">  <span class="keyword">const</span> excelRow = key.<span class="title function_">replace</span>(<span class="regexp">/[A-Z]/g</span>, <span class="string">&quot;&quot;</span>);</span><br><span class="line">  <span class="comment">//从Excel列名转换成数字</span></span><br><span class="line">  <span class="keyword">const</span> excelColumn = column.<span class="title function_">split</span>(<span class="string">&quot;&quot;</span>).<span class="title function_">reverse</span>().<span class="title function_">reduce</span>(<span class="function">(<span class="params">sum, item, index</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">const</span> value = item.<span class="title function_">replace</span>(<span class="regexp">/[A-Z]/g</span>, <span class="function">(<span class="params">match</span>) =&gt;</span> &#123;</span><br><span class="line">      <span class="keyword">return</span> match.<span class="title function_">charCodeAt</span>(<span class="number">0</span>) - <span class="number">65</span> + <span class="number">1</span>;</span><br><span class="line">    &#125;)</span><br><span class="line">    sum += value * <span class="title class_">Math</span>.<span class="title function_">pow</span>(<span class="number">26</span>, index);</span><br><span class="line">    <span class="keyword">return</span> sum</span><br><span class="line">  &#125;, <span class="number">0</span>)</span><br><span class="line">  <span class="keyword">return</span> [<span class="built_in">parseInt</span>(excelColumn), <span class="built_in">parseInt</span>(excelRow)];</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h3 id="代码解释"><a href="#代码解释" class="headerlink" title="代码解释"></a>代码解释</h3><p><img src="/images/2022/7/5/code1.jpg" alt="code1.jpg"></p>
<p>这部分代码通过列号,行号生成Excel单元格名称(A1,B1这样的),先写入通用的格式</p>
<p><img src="/images/2022/7/5/code2.jpg" alt="code2.jpg"></p>
<p>这部分代码对已存在的CellObject写入定制的样式,主要是从业务中获取单元格的样式数据(当前只有背景色),然后设置</p>
<h2 id="TODO"><a href="#TODO" class="headerlink" title="TODO"></a>TODO</h2><p>现在的方式要同时维护table的样式和导出的样式,而且需要保持两者一致,还是有一点心智负担的,后面考虑通过table每个cell的computedStyle获取可以映射的样式,设置到导出的对应CellObject.s对象上,这样应该可以做到所见即所得的导出体验..加油吧打工人..</p>

    </article>
    <!-- license  -->
    
        <div class="license-wrapper">
            <p>原文作者：<a href="https://apm29.github.io">Apm29</a>
            <p>原文链接：<a href="https://apm29.github.io/2022/07/05/SheetJS%20--%20%E5%89%8D%E7%AB%AF(%E6%B5%8F%E8%A7%88%E5%99%A8)%E5%AF%BC%E5%87%BAExcel%E6%96%87%E4%BB%B6/">https://apm29.github.io/2022/07/05/SheetJS%20--%20%E5%89%8D%E7%AB%AF(%E6%B5%8F%E8%A7%88%E5%99%A8)%E5%AF%BC%E5%87%BAExcel%E6%96%87%E4%BB%B6/</a>
            <p>发表日期：<a href="https://apm29.github.io/2022/07/05/SheetJS%20--%20%E5%89%8D%E7%AB%AF(%E6%B5%8F%E8%A7%88%E5%99%A8)%E5%AF%BC%E5%87%BAExcel%E6%96%87%E4%BB%B6/">July 5th 2022, 7:38:15 am</a>
            <p>更新日期：<a href="https://apm29.github.io/2022/07/05/SheetJS%20--%20%E5%89%8D%E7%AB%AF(%E6%B5%8F%E8%A7%88%E5%99%A8)%E5%AF%BC%E5%87%BAExcel%E6%96%87%E4%BB%B6/">July 5th 2022, 5:25:34 pm</a>
            <p>版权声明：本文采用<a rel="license noopener" target="_blank" href="http://creativecommons.org/licenses/by-nc/4.0/">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可</p>
        </div>
    
    <!-- paginator  -->
    <ul class="post-paginator">
        <li class="next">
            
                <div class="nextSlogan">Next Post</div>
                <a href= "/2022/07/06/%E4%BD%BF%E7%94%A8KeepAlive%E5%8A%A8%E6%80%81%E7%BC%93%E5%AD%98%E6%A0%87%E7%AD%BE%E9%A1%B5/" title= "使用KeepAlive动态缓存标签页">
                    <div class="nextTitle">使用KeepAlive动态缓存标签页</div>
                </a>
            
        </li>
        <li class="previous">
            
                <div class="prevSlogan">Previous Post</div>
                <a href= "/2022/06/22/%E9%92%89%E9%92%89H5%E5%BA%94%E7%94%A8%E8%B8%A9%E5%9D%91(1)/" title= "钉钉H5应用踩坑(1)">
                    <div class="prevTitle">钉钉H5应用踩坑(1)</div>
                </a>
            
        </li>
    </ul>
    <!-- 评论插件 -->
    <!-- 来必力City版安装代码 -->

<!-- City版安装代码已完成 -->
    
    
    <!-- partial('_partial/comment/changyan') -->
    <!--PC版-->


    
    

    <!-- 评论 -->
</main>
            <!-- profile -->
            
        </div>
        <footer class="footer footer-unloaded">
    <!-- social  -->
    
    <div class="social">
        
    
        
            
                <a href="mailto:yjw999wow@gmail.com" class="iconfont-archer email" title=email ></a>
            
        
    
        
            
                <a href="//github.com/apm29" class="iconfont-archer github" target="_blank" title=github></a>
            
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    

    </div>
    
    <!-- powered by Hexo  -->
    <div class="copyright">
        <span id="hexo-power">Powered by <a href="https://hexo.io/" target="_blank">Hexo</a></span><span class="iconfont-archer power">&#xe635;</span><span id="theme-info">theme <a href="https://github.com/fi3ework/hexo-theme-archer" target="_blank">Archer</a></span>
    </div>
    <div style="text-align: center">
        <img src="">
        <a href="https://beian.miit.gov.cn/"  style="color:#f72b07" target="_blank">浙ICP备20011000号-1</a>
    </div>
    <!-- 不蒜子  -->
    
    <div class="busuanzi-container">
    
    
    <span id="busuanzi_container_site_pv">PV: <span id="busuanzi_value_site_pv"></span> :)</span>
    
    </div>
    
</footer>

    </div>
    <!-- toc -->
    
    <div class="toc-wrapper" style=
    







top:50vh;

    >
        <div class="toc-catalog">
            <span class="iconfont-archer catalog-icon">&#xe613;</span><span>CATALOG</span>
        </div>
        <ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#SheetJS-%E2%80%93-%E5%89%8D%E7%AB%AF-%E6%B5%8F%E8%A7%88%E5%99%A8-%E5%AF%BC%E5%87%BAExcel%E6%96%87%E4%BB%B6"><span class="toc-number">1.</span> <span class="toc-text">SheetJS – 前端(浏览器)导出Excel文件</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%9C%80%E6%B1%82%E8%B0%83%E7%A0%94"><span class="toc-number">1.1.</span> <span class="toc-text">需求调研</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#SheetJS%E7%9A%84%E5%8A%9F%E8%83%BD"><span class="toc-number">1.2.</span> <span class="toc-text">SheetJS的功能</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%BC%95%E5%85%A5-%E5%AE%89%E8%A3%85%E6%96%B9%E5%BC%8F"><span class="toc-number">1.3.</span> <span class="toc-text">引入&#x2F;安装方式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80%E6%A6%82%E5%BF%B5"><span class="toc-number">1.4.</span> <span class="toc-text">基础概念</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%BC%E5%87%BA%E7%A4%BA%E4%BE%8B"><span class="toc-number">1.5.</span> <span class="toc-text">导出示例</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B7%A5%E5%85%B7%E5%87%BD%E6%95%B0"><span class="toc-number">1.6.</span> <span class="toc-text">工具函数</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#xlsx-style"><span class="toc-number">1.7.</span> <span class="toc-text">xlsx-style</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E4%BB%A3%E7%A0%81%E8%A7%A3%E9%87%8A"><span class="toc-number">1.7.1.</span> <span class="toc-text">代码解释</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#TODO"><span class="toc-number">1.8.</span> <span class="toc-text">TODO</span></a></li></ol></li></ol>
    </div>
    
    <div class="back-top iconfont-archer">&#xe639;</div>
    <div class="sidebar sidebar-hide">
    <ul class="sidebar-tabs sidebar-tabs-active-0">
        <li class="sidebar-tab-archives"><span class="iconfont-archer">&#xe67d;</span><span class="tab-name">Archive</span></li>
        <li class="sidebar-tab-tags"><span class="iconfont-archer">&#xe61b;</span><span class="tab-name">Tag</span></li>
        <li class="sidebar-tab-categories"><span class="iconfont-archer">&#xe666;</span><span class="tab-name">Cate</span></li>
    </ul>
    <div class="sidebar-content sidebar-content-show-archive">
          <div class="sidebar-panel-archives">
    <!-- 在ejs中将archive按照时间排序 -->
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    <div class="total-and-search">
        <div class="total-archive">
        Total : 44
        </div>
        <!-- search  -->
        
    </div>
    
    <div class="post-archive">
    
    
    
    
    <div class="archive-year"> 2022 </div>
    <ul class="year-list">
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/06</span><a class="archive-post-title" href= "/2022/07/06/%E4%BD%BF%E7%94%A8KeepAlive%E5%8A%A8%E6%80%81%E7%BC%93%E5%AD%98%E6%A0%87%E7%AD%BE%E9%A1%B5/" >使用KeepAlive动态缓存标签页</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/05</span><a class="archive-post-title" href= "/2022/07/05/SheetJS%20--%20%E5%89%8D%E7%AB%AF(%E6%B5%8F%E8%A7%88%E5%99%A8)%E5%AF%BC%E5%87%BAExcel%E6%96%87%E4%BB%B6/" >SheetJS -- 前端(浏览器)导出Excel文件</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">06/22</span><a class="archive-post-title" href= "/2022/06/22/%E9%92%89%E9%92%89H5%E5%BA%94%E7%94%A8%E8%B8%A9%E5%9D%91(1)/" >钉钉H5应用踩坑(1)</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">06/20</span><a class="archive-post-title" href= "/2022/06/20/%E4%BD%BF%E7%94%A8-vue-composition-api/" >使用@vue/composition-api</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">06/06</span><a class="archive-post-title" href= "/2022/06/06/Python%E6%B8%85%E9%99%A4NodeModules%E6%96%87%E4%BB%B6%E5%A4%B9%E8%84%9A%E6%9C%AC/" >Python清除NodeModules文件夹脚本</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">06/06</span><a class="archive-post-title" href= "/2022/06/06/%E5%AF%B9%E6%9C%80%E8%BF%91%E5%86%99%E7%9A%84Android%E5%BA%94%E7%94%A8%E7%9A%84%E6%80%BB%E7%BB%93(1)/" >对最近写的Android应用的总结(1)</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">05/31</span><a class="archive-post-title" href= "/2022/05/31/Vite-Plugin-Pages%E4%B8%8EKeep-Alive/" >Vite-Plugin-Pages与Keep-Alive</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">05/27</span><a class="archive-post-title" href= "/2022/05/27/VSCode%E9%85%8D%E7%BD%AE%E4%B8%8E%E6%8F%92%E4%BB%B6(Vue%E5%BC%80%E5%8F%91)/" >VSCode配置与插件（Vue开发）</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">01/19</span><a class="archive-post-title" href= "/2022/01/19/%E9%9D%99%E6%80%81%E7%BD%91%E7%AB%99%E7%94%9F%E6%88%90%E5%99%A8-Gatsby-%E5%AD%A6%E4%B9%A0/" >静态网站生成器 Gatsby 学习</a>
        </li>
    
    
    
    
    
        </ul>
    
    <div class="archive-year"> 2021 </div>
    <ul class="year-list">
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/21</span><a class="archive-post-title" href= "/2021/12/21/Kotlin%E5%8D%8F%E7%A8%8B%E7%9B%B8%E5%85%B3/" >Kotlin协程相关</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">08/09</span><a class="archive-post-title" href= "/2021/08/09/%E5%88%9D%E8%AF%86Ktorm/" >初识Ktorm</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">08/05</span><a class="archive-post-title" href= "/2021/08/05/NUXTJS%E7%9A%84%E5%A4%9A%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/" >NUXTJS的多环境配置</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">08/05</span><a class="archive-post-title" href= "/2021/08/05/NuxtJS%E9%9D%9E%E6%A0%B9%E7%9B%AE%E5%BD%95%E4%B8%8B%E9%83%A8%E7%BD%B2/" >NuxtJS非根目录下部署</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/24</span><a class="archive-post-title" href= "/2021/07/24/%E4%BD%BF%E7%94%A8vue-sfc-rollup%E5%88%9B%E5%BB%BA%E8%87%AA%E5%B7%B1%E7%9A%84NPM%E5%BA%93/" >使用vue-sfc-rollup创建自己的NPM库</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/19</span><a class="archive-post-title" href= "/2021/07/19/Certbot%E7%94%9F%E6%88%90Https%E8%AF%81%E4%B9%A6/" >Certbot生成Https证书</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/19</span><a class="archive-post-title" href= "/2021/07/19/Ubuntu%E4%B8%ADMysql5-0%E9%87%8D%E6%96%B0%E5%AE%89%E8%A3%85%E4%B8%8E%E5%88%9D%E5%A7%8B%E5%8C%96/" >Ubuntu中Mysql5.0重新安装与初始化</a>
        </li>
    
    
    
    
    
        </ul>
    
    <div class="archive-year"> 2020 </div>
    <ul class="year-list">
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">10/28</span><a class="archive-post-title" href= "/2020/10/28/JetPack-Navigation%E4%B8%ADFragment%E7%9A%84%E8%BF%94%E5%9B%9E%E9%94%AE%E6%8B%A6%E6%88%AA/" >JetPack-Navigation中Fragment的返回键拦截</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">07/07</span><a class="archive-post-title" href= "/2020/07/07/Flutter%E5%9B%BD%E9%99%85%E5%8C%96flutter-intl/" >Flutter国际化flutter_intl</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">06/18</span><a class="archive-post-title" href= "/2020/06/18/Vue%E9%A1%B9%E7%9B%AE%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1%E5%AE%9E%E8%B7%B5%EF%BC%88%E5%AE%9E%E7%8E%B0%E5%8A%A8%E6%80%81%E6%9D%83%E9%99%90%EF%BC%89/" >Vue项目动态路由实践（实现动态权限）</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">05/29</span><a class="archive-post-title" href= "/2020/05/29/%E7%94%A8%E5%88%86%E6%B2%BB%E6%80%9D%E6%83%B3%E9%9D%9E%E9%80%92%E5%BD%92%E8%8E%B7%E5%8F%96N%E4%B8%AA%E6%95%B0%E7%BB%84%E5%85%83%E7%B4%A0%E7%9A%84%E7%BB%84%E5%90%88/" >用分治思想非递归获取N个数组元素的组合</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">03/23</span><a class="archive-post-title" href= "/2020/03/23/TravisCi-Gradle%E9%83%A8%E7%BD%B2SpringBoot%E9%A1%B9%E7%9B%AE%E5%88%B0aliyun-ECS/" >TravisCi/Gradle部署SpringBoot项目到aliyun ECS</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">01/07</span><a class="archive-post-title" href= "/2020/01/07/Linux-OSX-%E5%91%BD%E4%BB%A4/" >Linux/OSX 命令</a>
        </li>
    
    
    
    
    
        </ul>
    
    <div class="archive-year"> 2019 </div>
    <ul class="year-list">
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/23</span><a class="archive-post-title" href= "/2019/12/23/%E7%94%A8Flutter%E9%87%8D%E6%9E%84%E5%BA%94%E7%94%A8/" >用Flutter重构应用</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/20</span><a class="archive-post-title" href= "/2019/12/20/Docker%E7%AC%94%E8%AE%B0/" >Docker笔记</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/19</span><a class="archive-post-title" href= "/2019/12/19/Hexo/" >Hexo</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/19</span><a class="archive-post-title" href= "/2019/12/19/Android-Text-measure-draw/" >Android Text measure/draw</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/19</span><a class="archive-post-title" href= "/2019/12/19/Flutter-WebView-%E9%94%AE%E7%9B%98%E9%97%AE%E9%A2%98/" >Flutter WebView 键盘问题</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/19</span><a class="archive-post-title" href= "/2019/12/19/Git-Submodule-%E5%AD%90%E6%A8%A1%E5%9D%97/" >Git Submodule(子模块)</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/18</span><a class="archive-post-title" href= "/2019/12/18/Android-Webview%E8%AE%BE%E7%BD%AECookie/" >Android Webview设置Cookie</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/18</span><a class="archive-post-title" href= "/2019/12/18/NPM%E8%AE%BE%E7%BD%AERegistry/" >NPM设置Registry</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/17</span><a class="archive-post-title" href= "/2019/12/17/LiveData/" >LiveData</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/13</span><a class="archive-post-title" href= "/2019/12/13/AndroidDevMetrics/" >AndroidDevMetrics</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/CustomPainter/" >CustomPaint</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/Dart%E5%AD%A6%E4%B9%A0/" >Dart 语法</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/Databinding%20in%20kotlin/" >DataBinding in kotlin</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/Gradle%E5%AD%A6%E4%B9%A0/" >Gradle与Groovy</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/JetpackSetup/" >Jetpack</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/PDFViewerInAndroid/" >PDFViewer on Android</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/Navigation/" >Navigation初探</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/RxCache/" >RxCache</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/RxLifecycle%E5%AD%A6%E4%B9%A0/" >RxLifecycle</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/Spring/" >SpringFrameWork</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/TextView%E4%B8%AD%E6%98%BE%E7%A4%BAHtml%E5%86%85%E5%AE%B9/" >在TextView中显示Html格式的文字</a>
        </li>
    
    
        <li class="archive-post-item">
            <span class="archive-post-date">12/11</span><a class="archive-post-title" href= "/2019/12/11/flutter/" >Flutter</a>
        </li>
    
    </div>
  </div>
        <div class="sidebar-panel-tags">
    <div class="sidebar-tags-name">
    
        <span class="sidebar-tag-name" data-tags="Android"><span class="iconfont-archer">&#xe606;</span>Android</span>
    
        <span class="sidebar-tag-name" data-tags="JetPack"><span class="iconfont-archer">&#xe606;</span>JetPack</span>
    
        <span class="sidebar-tag-name" data-tags="Tools"><span class="iconfont-archer">&#xe606;</span>Tools</span>
    
        <span class="sidebar-tag-name" data-tags="Linux"><span class="iconfont-archer">&#xe606;</span>Linux</span>
    
        <span class="sidebar-tag-name" data-tags="Flutter"><span class="iconfont-archer">&#xe606;</span>Flutter</span>
    
        <span class="sidebar-tag-name" data-tags="Dart"><span class="iconfont-archer">&#xe606;</span>Dart</span>
    
        <span class="sidebar-tag-name" data-tags="Kotlin"><span class="iconfont-archer">&#xe606;</span>Kotlin</span>
    
        <span class="sidebar-tag-name" data-tags="DataBinding"><span class="iconfont-archer">&#xe606;</span>DataBinding</span>
    
        <span class="sidebar-tag-name" data-tags="Docker"><span class="iconfont-archer">&#xe606;</span>Docker</span>
    
        <span class="sidebar-tag-name" data-tags="Git"><span class="iconfont-archer">&#xe606;</span>Git</span>
    
        <span class="sidebar-tag-name" data-tags="Gradle"><span class="iconfont-archer">&#xe606;</span>Gradle</span>
    
        <span class="sidebar-tag-name" data-tags="Groovy"><span class="iconfont-archer">&#xe606;</span>Groovy</span>
    
        <span class="sidebar-tag-name" data-tags="NPM"><span class="iconfont-archer">&#xe606;</span>NPM</span>
    
        <span class="sidebar-tag-name" data-tags="travisci"><span class="iconfont-archer">&#xe606;</span>travisci</span>
    
        <span class="sidebar-tag-name" data-tags="Fragment"><span class="iconfont-archer">&#xe606;</span>Fragment</span>
    
        <span class="sidebar-tag-name" data-tags="Coroutines"><span class="iconfont-archer">&#xe606;</span>Coroutines</span>
    
        <span class="sidebar-tag-name" data-tags="Shell"><span class="iconfont-archer">&#xe606;</span>Shell</span>
    
        <span class="sidebar-tag-name" data-tags="前端"><span class="iconfont-archer">&#xe606;</span>前端</span>
    
        <span class="sidebar-tag-name" data-tags="nuxtjs"><span class="iconfont-archer">&#xe606;</span>nuxtjs</span>
    
        <span class="sidebar-tag-name" data-tags="Python"><span class="iconfont-archer">&#xe606;</span>Python</span>
    
        <span class="sidebar-tag-name" data-tags="SheetJS"><span class="iconfont-archer">&#xe606;</span>SheetJS</span>
    
        <span class="sidebar-tag-name" data-tags="Spring"><span class="iconfont-archer">&#xe606;</span>Spring</span>
    
        <span class="sidebar-tag-name" data-tags="Springboot"><span class="iconfont-archer">&#xe606;</span>Springboot</span>
    
        <span class="sidebar-tag-name" data-tags="TravisCI"><span class="iconfont-archer">&#xe606;</span>TravisCI</span>
    
        <span class="sidebar-tag-name" data-tags="MySQL"><span class="iconfont-archer">&#xe606;</span>MySQL</span>
    
        <span class="sidebar-tag-name" data-tags="Vue"><span class="iconfont-archer">&#xe606;</span>Vue</span>
    
        <span class="sidebar-tag-name" data-tags="Vite"><span class="iconfont-archer">&#xe606;</span>Vite</span>
    
        <span class="sidebar-tag-name" data-tags="ORM"><span class="iconfont-archer">&#xe606;</span>ORM</span>
    
        <span class="sidebar-tag-name" data-tags="算法"><span class="iconfont-archer">&#xe606;</span>算法</span>
    
        <span class="sidebar-tag-name" data-tags="javascript"><span class="iconfont-archer">&#xe606;</span>javascript</span>
    
        <span class="sidebar-tag-name" data-tags="SSG"><span class="iconfont-archer">&#xe606;</span>SSG</span>
    
        <span class="sidebar-tag-name" data-tags="SEO"><span class="iconfont-archer">&#xe606;</span>SEO</span>
    
    </div>
    <div class="iconfont-archer sidebar-tags-empty">&#xe678;</div>
    <div class="tag-load-fail" style="display: none; color: #ccc; font-size: 0.6rem;">
    缺失模块。<br/>
    1、请确保node版本大于6.2<br/>
    2、在博客根目录（注意不是archer根目录）执行以下命令：<br/>
    <span style="color: #f75357; font-size: 1rem; line-height: 2rem;">npm i hexo-generator-json-content --save</span><br/>
    3、在根目录_config.yml里添加配置：
    <pre style="color: #787878; font-size: 0.6rem;">
jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: true
    tags: true</pre>
    </div> 
    <div class="sidebar-tags-list"></div>
</div>
        <div class="sidebar-panel-categories">
    <div class="sidebar-categories-name">
    
        <span class="sidebar-category-name" data-categories="笔记"><span class="iconfont-archer">&#xe60a;</span>笔记</span>
    
        <span class="sidebar-category-name" data-categories="Git"><span class="iconfont-archer">&#xe60a;</span>Git</span>
    
    </div>
    <div class="iconfont-archer sidebar-categories-empty">&#xe678;</div>
    <div class="sidebar-categories-list"></div>
</div>
    </div>
</div> 
    <script>
    var siteMeta = {
        root: "/",
        author: "Apm29"
    }
</script>
    <!-- CDN failover -->
    <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
    <script type="text/javascript">
        if (typeof window.$ === 'undefined')
        {
            console.warn('jquery load from jsdelivr failed, will load local script')
            document.write('<script src="/lib/jquery.min.js">\x3C/script>')
        }
    </script>
    <script src="/scripts/main.js"></script>
    <!-- algolia -->
    
    <!-- busuanzi  -->
    
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    
    <!-- CNZZ  -->
    
    </div>
    <!-- async load share.js -->
    
        <script src="/scripts/share.js" async></script>    
     
    </body>
</html>


